import React, { ReactNode } from "react";
import classNames from 'classnames'
import './index.scss'

interface iconProps extends React.HTMLAttributes<HTMLOrSVGElement>{
  className?:string;
  type?: 'fixed' | 'apple' | 'close';
  size?: number;
}

const svgMap = {
  fixed:<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="896"><path d="M801.152 85.76a38.4 38.4 0 0 0-51.904-2.24L490.368 302.016l-49.344-49.344a38.4 38.4 0 0 0-54.336 0L251.968 387.328a38.4 38.4 0 0 0 0 54.336l142.592 142.528-262.912 262.912 45.248 45.248 262.912-262.912 142.528 142.592a38.4 38.4 0 0 0 54.336 0l134.656-134.72a38.4 38.4 0 0 0 0-54.336l-49.28-49.28 218.432-258.944a38.4 38.4 0 0 0-2.176-51.84l-137.152-137.216z m-28.608 61.824l103.872 103.872-241.28 285.888 72.832 72.832-98.496 98.496-294.144-294.144 98.56-98.56 72.768 72.896 285.888-241.28z" fill="#000000" fill-opacity=".9" p-id="897"></path></svg>,
  apple: <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1149"><path d="M530.56 256.512a164.352 164.352 0 0 0 164.352-164.288V64h-28.16A164.352 164.352 0 0 0 502.4 228.288v28.224h28.16zM613.12 174.72a116.672 116.672 0 0 1-61.12 32.192 116.672 116.672 0 0 1 93.248-93.312 116.672 116.672 0 0 1-32.192 61.12z m199.232 151.04c14.336 11.264 28.16 25.344 40.512 42.88-1.408 0.832-11.584 6.528-24.96 17.536-29.76 24.32-75.2 74.56-74.56 152.96 1.536 135.872 121.856 180.992 123.328 181.504-0.192 0.704-1.216 4.096-3.072 9.6a491.456 491.456 0 0 1-60.544 118.08c-38.336 54.848-78.08 109.184-140.8 110.144-30.208 0.768-50.432-7.744-71.424-16.64-21.824-9.216-44.48-18.752-80.192-18.752-37.952 0-61.824 9.92-84.864 19.52-19.776 8.256-38.912 16.256-65.856 17.344-60.672 1.92-106.432-59.2-145.216-113.6-79.104-111.616-139.264-314.56-58.24-451.904 40.32-68.48 112-111.68 190.08-112.64 33.6-0.832 66.24 11.84 94.848 22.912 21.76 8.448 41.152 15.936 56.768 15.936 13.76 0 31.744-6.912 52.992-15.04 33.984-13.056 76.416-29.312 123.584-25.728 22.72 1.472 78.272 7.04 127.616 45.888z m-131.456 11.84h-0.576c-25.728-1.984-51.456 4.672-79.36 14.848-4.288 1.536-10.432 3.84-16.96 6.4-8.96 3.392-18.56 7.04-24.832 9.216-12.672 4.48-31.424 10.432-51.008 10.432-18.56 0-36.096-4.992-48.896-9.216-9.664-3.2-20.48-7.424-30.016-11.072-3.136-1.28-6.144-2.432-8.96-3.456-25.728-9.792-45.184-15.552-62.336-15.104h-0.704c-56.832 0.704-110.336 32.256-140.928 84.16-30.976 52.544-37.184 122.048-23.808 195.968 13.248 73.408 44.736 144.128 79.36 193.088 19.776 27.648 37.568 51.584 56.32 68.736 18.304 16.768 30.72 20.736 39.68 20.48 16.128-0.64 26.496-4.992 47.552-13.696l3.072-1.28c24.32-9.984 55.68-21.888 102.144-21.888 47.04 0 78.336 13.056 101.44 22.784 21.312 8.96 31.552 13.056 48.832 12.672h0.512c12.864-0.256 25.6-5.376 41.408-19.84 17.088-15.552 33.152-37.504 52.8-65.664v-0.064c17.152-24.448 30.016-48.704 39.04-68.544a274.752 274.752 0 0 1-29.056-23.552 248.064 248.064 0 0 1-80.128-183.296v-0.128a245.568 245.568 0 0 1 61.888-165.376c3.072-3.52 6.208-6.912 9.28-10.112-32.64-21.312-67.52-25.28-85.76-26.496z" fill="#000000" fill-opacity=".9" p-id="1150"></path></svg>,
  close:<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="804"><path d="M556.8 512L832 236.8c12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0L512 467.2l-275.2-277.333333c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l275.2 277.333333-277.333333 275.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333L512 556.8 787.2 832c6.4 6.4 14.933333 8.533333 23.466667 8.533333s17.066667-2.133333 23.466666-8.533333c12.8-12.8 12.8-32 0-44.8L556.8 512z" fill="#666666" p-id="805"></path></svg>,
}
const Icon = (props:iconProps) => {
  const {className,type='fixed',size=32,...others}=props
  
  const cls = classNames({
    'ant-icon': true,
    [className as string]:!!className
  })

  const style:React.CSSProperties = {...props.style}
  if (size) {
    style.width = size;
    style.height = size;
  }

  if (type in svgMap) {
    const svg = svgMap[type]
    // 克隆元素
    return React.cloneElement(svg, {
      ...others,
      className: cls,
      style,
    })
  }
  return <i></i>
}

export default Icon